<template>
	<view class="myContent" :class="$thatThemeClassName">
		<view class="top_back"></view>
		
		<view class="top_card card_content flex-col" style="position: relative;">
			<view class="flex-1 flex-row justify-center align-center">
				<view style="width: 23%;" class="flex-col justify-center align-center fill-height" @click="goToLogin">
					<view class="actorimg">
						<uv-image :src="userInfo.avatarUrl" width="100%" height="100%" shape="circle"></uv-image>
					</view>
				</view>
				<view class="flex-1" @click="goToLogin">
					<view class="loginName">{{ userInfo.nickName }}</view>
					<view class="usertype_card">
						<view class="tag" v-if="userType.length > 0">{{ userType }}</view>
						<view class="tag" v-else>未知</view>
					</view>
				</view>
				
				<view class="settingBtn">
					<uv-icon name="setting" color="#585250" size="32"></uv-icon>
				</view>
			</view>
			<view class="flex-row" style="padding-bottom: 15px;">
				<view class="flex-col justify-center align-center flex-1">
					<view class="num">{{ collectTotal }}</view>
					<view class="num_title">收藏数</view>
				</view>
				<view class="w1"></view>
				<view class="flex-col justify-center align-center flex-1">
					<view class="num">{{ downTotal }}</view>
					<view class="num_title">下载数</view>
				</view>
				<view class="w1"></view>
				<view class="flex-col justify-center align-center flex-1">
					<view class="num">{{ lookTotal }}</view>
					<view class="num_title">查看数</view>
				</view>
			</view>
		</view>
		
		<view class="fill-width" style="height: 40rpx;"></view>
		
		<view class="fun_content card_content">
			<view class="myService">
				<view class="round"></view>
				我的服务
			</view>
			<uv-cell-group class="fill-width flex-unset">
				<uv-cell title="下载记录" icon="download" isLink url="/pages/my/child/downloadRecord"></uv-cell>
				<uv-cell title="我的收藏" icon="star" isLink url="/pages/my/child/myCollection"></uv-cell>
				<uv-cell title="浏览记录" icon="pushpin" isLink url="/pages/my/child/myLook"></uv-cell>
				<uv-cell title="用户协议" icon="empty-news" isLink url="/pages/my/child/uerAgreement"></uv-cell>
				<!-- <uv-cell title="关于我们" icon="attach" isLink url="/pages/my/child/aboutUs"></uv-cell> -->
				<!-- <uv-cell title="常见问题" icon="edit-pen-fill" isLink url="/pages/my/child/commonProblem"></uv-cell> -->
				<uv-cell title="退出登录" icon="lock-open" @click="logout"></uv-cell>
				<Adver/>
			</uv-cell-group>
		</view>
	</view>
</template>

<script>
	import Adver from '@/framework/componentsUI/adver/index.vue'
	import { getUserInfo } from '@/api/common/login'
	import { logoutAndClearUser } from '@/hooks/login'
	import { getCurUserDownLookCollTotal } from '@/api/imgRecord'
	import sharePages from '@/framework/plugins/sharePages'
	export default {
		components:{ Adver },
		mixins: [sharePages],
		data() {
			return {
				defaultAvatarUrl: 'https://www.jq22.com/demo/apppm202005260947/images/dag.jpg',
				userInfo: {
					"nickName":"未登录（点击登录）",
					"gender":0,
					"language":"",
					"city":"",
					"province":"",
					"country":"",
					avatarUrl: ''
				},
				userType: '',
				downTotal: 0,
				lookTotal: 0,
				collectTotal: 0
			}
		},
		computed: {
			genderName(){
				if(this?.userInfo?.gender){
					return '不明'
				}
				return this.userInfo.gender == '0' ? '男' : '女'
			}
		},
		methods: {
			logout(){
				uni.showModal({
				    title: '提示',
				    content: '是否要退出登录？',
				    success: async (res) => {
				        if (res.confirm) {
				            await logoutAndClearUser()
							this.loadUser()
				        } 
				    }
				});
			},
			async loadUser(){
				const token = uni.getStorageSync("token");
				let user = null
				if(token){
					const userInfo = await getUserInfo()
					user = userInfo.user
					uni.setStorageSync("user", user)
					
					if(user?.userName.startsWith('wx_')){
						this.userType = '微信用户'
					}
					if(user?.userName.startsWith('email_')){
						this.userType = '邮箱用户'
					}
					if(user?.userName.startsWith('phone_')){
						this.userType = '手机号码用户'
					}
					if(this.userType?.length == 0){
						this.userType = '未知'
					}
				}
				this.userInfo.avatarUrl = user?.avatar || this.defaultAvatarUrl
				this.userInfo.nickName = user?.userName || '未登录（点击登录）'
			},
			goToLogin(){
				const userInfo = uni.getStorageSync("user")
				if(!userInfo){
					this.goToPage('/pages/login/index')
				}
			},
			goToPage(url){
				uni.navigateTo({
				  url: url 
				});
			},
			async getCurUserDownLookCollTotal(){
				const userInfo = uni.getStorageSync("user")
				if(!userInfo){
					return
				}
				const totalMap = await getCurUserDownLookCollTotal().then(res => res.data)
				this.downTotal = totalMap.downTotal || 0
				this.lookTotal = totalMap.lookTotal || 0
				this.collectTotal = totalMap.collectTotal || 0
			}
		},
		onShow(){
			console.log('onShow')
			this.loadUser()
		},
		async onLoad(){
			await this.loadUser()
			await this.getCurUserDownLookCollTotal()
		}
	}
</script>

<style lang="scss" scoped>
.myContent {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5; // 更换背景颜色
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.top_back {
  background-image: url(/static/other/topback.png) !important;
  background-size: 100% 100%;
  height: 250rpx; // 增加顶部背景高度
  border-bottom-left-radius: 60px; // 增大圆角半径
  border-bottom-right-radius: 60px;
}

.card_content {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.05); // 增加阴影效果
  border-radius: 1.2rem; // 增大卡片圆角半径
  overflow: hidden;
  background-color: white;
  width: 92%; // 增加卡片宽度
  margin: 0 auto;
}

.top_card {
	height: 320rpx; // 增加顶部卡片高度
  margin-top: -180rpx; // 调整顶部卡片位置
}

.w1 {
  width: 2px; // 增加分割线宽度
  height: 1rem; // 增加分割线高度
  background: #ddd; // 调整分割线颜色
}

.num {
  font-size: 1.5rem; // 增大数字字体大小
  font-weight: bold;
  color: #333; // 调整数字颜色为深灰色，与新背景色搭配
}

.num_title {
  color: #333; // 调整标题颜色为深灰色，与新背景色搭配
  font-size: 0.9rem; // 增大标题字体大小
}

.loginName {
  font-size: 1rem; // 增大登录名字体大小
  font-weight: bold;
  color: #333 !important; // 调整登录名颜色为深灰色，与新背景色搭配
}

.actorimg {
  width: 110rpx; // 增大头像宽度
  height: 110rpx; // 增大头像高度
  border-radius: 50%;
  border: 1px solid #999; // 增加头像边框宽度
  cursor: pointer;
}

.usertype_card {
  padding-top: 8px; // 增加用户类型卡片内边距
  .tag {
    width: fit-content;
    background: #e9e4db; // 保持用户类型标签背景颜色
    padding: 0.3rem 0.6rem; // 增加标签内边距
    border-radius: 0.4rem; // 增大标签圆角半径
    color: #a18e67; // 保持标签文字颜色
    font-size: .8rem; // 增大标签文字字体大小
  }
}

.settingBtn {
  position: absolute;
  top: 30px; // 调整设置按钮位置
  right: 30px;
}

:deep(.uv-cell-group__wrapper > .uv-line) {
  display: none;
}

:deep(.uv-cell-group__wrapper > .uv-cell:last-child .uv-line) {
  display: none;
}

.myService {
  border-bottom: solid 1px #ccc; // 调整服务标题下划线颜色
  font-style: normal;
  display: flex;
  align-items: center;
  font-size: 0.95rem; // 增大服务标题字体大小
  font-weight: 500;
  padding: 15px 12px 12px 24px; // 调整服务标题内边距
}

.round {
  width: 6px; // 增大圆形标记宽度
  height: 14px; // 增大圆形标记高度
  display: inline-block;
  background: #a18e67; // 保持圆形标记颜色
  margin-right: 8px; // 增加圆形标记右边距
  border-radius: 10px;
}

.top {
  height: 180px; // 增加顶部高度
  background-image: linear-gradient(to bottom, #377ff5, #3580f2); // 保持顶部背景渐变颜色
  border-bottom-left-radius: 60px; // 增大顶部圆角半径
  border-bottom-right-radius: 60px;
}

:deep(.uv-cell__body) {
  padding: 15px 18px; // 增加单元格内边距
}

.fun_content {
  width: 92%; // 增加功能内容宽度
}

.nulldiv {
  width: 100%;
  height: 15px; // 增加空白区域高度
  min-height: 15px;
}

.foot {
  flex: 1;
  width: 92%; // 增加底部区域宽度
  background-color: white;
  margin: 0 auto;
  border-radius: 20px; // 增大底部区域圆角半径
  margin-top: 15px; // 增加底部区域上边距
  margin-bottom: 15px; // 增加底部区域下边距
}

</style>